<template>
    <div id="tmpl">
        <div id="cate">
            <ul v-bind:style='{"width": ulWidth + "px"}'>
                <li @click="getimgs(0)">全部</li>
                <li v-for="(item,index) in cates" :key="index" @click="getimgs(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <!-- 图片列表 -->
        <div id="imglist">
            <ul>
                <li v-for="(item,index) in list" :key="index">
                   <router-link v-bind='{to:"/photos/photoinfo/" + item.id}'>
                    <img :src="item.img_url" alt="">
                    <div id="desc">
                        <h5 v-text="item.title"></h5>
                        <p v-text="item.zhaiyao"></p>
                    </div>
                   </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data(){
      return {
          cates:[],//用来存储图片分类数据的数组
          ulWidth: 375,
          list:[]
      }
  },
  created(){
      //获取图片分类数据
      this.getcates()
      var all = 0;
      this.getimgs(all)
  },
  methods:{
      getcates(){
          var url = `${this.$common.apidomain}/api/getimgcategory`;
          this.$http.get(url).then((res)=>{
              if(res.body.status != 0 ){
                  Toast(res.body.message)
                  return;
              }
              //获取数据的赋值
              this.cates = res.body.message;

              //实现当前分类数据的url总宽度
              var w = 66;
              var count = res.body.message.length + 1;
              this.ulWidth = count * w;
          })
      },
      getimgs(cateid){
          cateid = cateid || 0;
          var url = `${this.$common.apidomain}/api/getimages/${cateid}`
          this.$http.get(url).then((res)=>{
              if(res.body.status != 0){
                  Toast(res.body.message)
                  return;
              }
              this.list = res.body.message;
          })
      }
  }
}
</script>
<style scoped>
    #cate{
        max-width: 375px;
        overflow-x: auto;
        background-color: #fff;
    }
    #cate ul{
        padding-left: 10px;
        margin:0;
    }
    #cate li{
        list-style: none;
        color: #0094ff;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        margin: 5px;
    }
    /* 实现图片列表样式 */
    #imglist{

    }
    #imglist ul{

        padding: 0;
    }
    #imglist li{
        list-style:none;
        position: relative;
       
    }
    #imglist img{
        width: 100%;
        height: 300px;
    }
    #desc{
        width: 100%;
        background-color: rgba(0,0,0,.2);
        position: absolute;
        bottom: 2px;
        left:0px;
    }
    #desc h5{
        color: #fff;
        font-weight: 700;
        padding: 5px;
    }
    #desc p {
        color: #fff;
        padding: 5px;
    }
</style>
